<template>


  <div class="app-container">


    <el-tabs type="card"  class="custom-tabs">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-info"></i> 项目信息</span>

        <el-card shadow="always" style="margin: 20px">

        <el-descriptions :column="1"  border  style="margin: 20px;">
          <el-descriptions-item label="项目名称"  > {{formView.projectName}}</el-descriptions-item>
          <el-descriptions-item label="研究领域">{{ formView.researchField }}</el-descriptions-item>
          <el-descriptions-item label="所属方向">{{getDeptLabel(formView.deptId) }}</el-descriptions-item>
          <el-descriptions-item label="负责人"  > {{formView.projectLeader}}</el-descriptions-item>
          <el-descriptions-item label="立项时间">{{ formView.approvalTime }}</el-descriptions-item>

		      <el-descriptions-item label="开始时间"  > {{formView.startDate}}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ formView.endDate }}</el-descriptions-item>
          <el-descriptions-item label="经费(万元)">
            ¥{{ formView.funding ? formView.funding.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '0.00' }}
           </el-descriptions-item>
          <!-- <el-descriptions-item label="进度">
            <el-progress :percentage="formView.progress" :text-inside="true"
            :stroke-width="26" style="width: 50%" :color="(percentage) => customColorMethod(percentage)"></el-progress>
          </el-descriptions-item> -->
          <el-descriptions-item label="状态">
            <dict-tag :options="dict.type.sci_pjt_status" :value="formView.status"/>
          </el-descriptions-item>
		      <el-descriptions-item label="联系电话"  > {{this.formView.phone}}</el-descriptions-item>
        </el-descriptions>
        </el-card>

      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-s-flag"></i> 课题信息</span>
        <ProjectTopic :projectId="formView.id"/>
      </el-tab-pane>
      <el-tab-pane label="项目成员">
        <span slot="label"><i class="el-icon-s-custom"></i> 项目成员</span>
        <ProjectMember :projectId="formView.id" />
      </el-tab-pane>
      <el-tab-pane label="任务信息">
        <span slot="label"><i class="el-icon-s-check"></i> 任务信息</span>
        <ProjectTask :projectId="formView.id" />
      </el-tab-pane>
      <el-tab-pane >
        <span slot="label"><i class="el-icon-s-order"></i> 风险问题</span>
      </el-tab-pane>
      <el-tab-pane >
        <span slot="label"><i class="el-icon-s-platform"></i> 项目文件</span>
        <el-descriptions  :column="1" border style="margin: 50px;">
          <el-descriptions-item v-for="(row, index) in formView.fileRows" :key="'file-' + index" :label="row.fileClassName || '未命名文件'">
            <div>
              <p>
                <template v-if="row.fileInfo && row.fileInfo.length > 0">
                  <div v-for="(file, fileIndex) in row.fileInfo" :key="fileIndex" style="margin-top: 5px;">
                    <el-link
                      type="primary"
                      target="_blank"
                       @click="handleDownload(file)"
                    >
                      {{ file.originalName }}
                    </el-link>

                    <span style="margin-left: 8px; color: #909399; font-size: 12px">
                      ({{ (file.fileSize/1024).toFixed(2) }} KB)
                    </span>
                  </div>
                </template>
                <span v-else style="color: #909399">无附件</span>
              </p>
              <p>上传人: {{ row.uploader }}</p>
              <p>上传时间: {{ row.uploadTime }}</p>

            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="成果信息">定时任务补偿</el-tab-pane>
      <el-tab-pane label="项目资源"></el-tab-pane>
    </el-tabs>








  </div>
</template>

<script>
import { listProjectInfo, getProjectInfo, delProjectInfo, addProjectInfo, updateProjectInfo } from "@/api/sci/projectInfo";
import { downloadMinioFile } from '@/api/common/common';
import { listDept } from '@/api/system/dept';
import  ProjectMember  from './member/index.vue';
import ProjectTopic from './topic/index.vue';
import  ProjectTask  from './task/index.vue';

import { listAppSubmit, getAppSubmit} from "@/api/sci/appSubmit";




export default {
  name: "ProjectInfo",
  dicts: ['sci_pjt_status','sci_member_role'],
  components: {
    ProjectMember,
    ProjectTopic,
    ProjectTask
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],

      // 子表选中数据
      checkedSciProjectTopic: [],

      checkedSciProjectMember: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 项目征集发布表格数据
      projectInfoList: [],

      // 科研项目课题表格数据
      sciProjectTopicList: [],

      sciProjectMemberList: [],

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

	    daterangeApprovalTime: [],

      drawer: false,

      readonlyApplicationId: false, // 控制是否只读



      username : this.$store.state.user.nickName,

	    deptList: [],

      selectApplicationList: [],

      applicationList: [],

      applicationId: null,

      activeStep: 0,
      selectedTopicId: null,

      projectId: null,


      isEditing: true, // 用于判断是否是编辑模式


      projectRoles: [
        { label: '负责人', value: 'leader' },
        { label: '成员', value: 'member' },
        { label: '课题负责人', value: 'topic_leader' },
        { label: '协作成员', value: 'collaborator' }
      ],

      // 查询参数
      queryParams: {
         pageNum: 1,
        pageSize: 10,
        projectName: null,
        researchField: null,
        deptId: null,
        projectLeader: null,
        startDate: null,
        approvalTime: null,
        progress: null,
        status: null,
        endDate: null
      },
      // 表单参数
      form: {
        id: null,
        projectName: null,
        researchField: null,
        deptId: null,
        projectLeader: null,
        approvalTime: null,
        startDate: null,
        endDate: null,
        funding: null,
        progress: null,
        status: null,
        phone: null,
        members: [], // 新增的成员列表
        sciProjectTopicList: [], // 新增的科研项目课题列表
        sciProjectMemberList: [], // 新增的科研项目成员列表
        fileRows: [
          {
            fileClassName: '',
            uploader: '',
            uploadTime: '',
            fileInfo: []
          }
        ]
      },
      formView: {
        projectName: '',
        researchField: '',
        deptId: '',
        projectLeader: '',
        approvalTime: '',
        startDate: '',
        endDate: '',
        funding: null,
        progress: 0,
        status: '',
        phone: '',
        sciProjectTopicList: [],
        sciProjectMemberList: [],
        fileRows: []
      },

      formData: {
        fileRows: [] // 初始化为空数组
      },
      // 表单校验
      rules: {
        applicationId: [

        ],
        projectName: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        researchField: [
          { required: true, message: "研究领域不能为空", trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "所属方向不能为空", trigger: "blur" }
        ],
        projectLeader: [
          { required: true, message: "项目负责人不能为空", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],

        endDate: [
          { required: true, message: "结束时间不能为空", trigger: "blur" }
        ],

        approvalTime: [
          { required: true, message: "立项时间不能为空", trigger: "blur" }
        ],
        funding: [
          { required: true, message: "项目经费不能为空", trigger: "blur" }
        ],
        progress: [
          { required: true, message: "项目进度不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "项目状态不能为空", trigger: "change" }
        ],
        phone: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        fileRows: {
          fileClassName: [
            { required: true, message: '请选择文件名称', trigger: 'change' }
          ],

          fileInfo: [
            { required: true, message: '请上传附件', trigger: 'change' }
          ],
        },
        sciProjectMemberList: {

          nickName: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          role: [
            { required: true, message: '角色不能为空', trigger: 'blur' }
          ]
        },
        sciProjectTopicList: {
          topicName: [
            { required: true, message: '课题名称不能为空', trigger: 'blur' }
          ],
          leader: [
            { required: true, message: '负责人不能为空', trigger: 'blur' }
          ]
        }
      }
    };
  },
  created() {
	  this.getDeptList();
    // 首次进入页面加载项目信息
    this.loadProjectInfoData();
  },

  watch: {
    '$route'(to, from) {
      if (to.name === 'ProjectInfo') {
        this.loadProjectInfoData();
      }
    },
    formView: {
      deep: true,
      handler(newVal) {
        console.log('formView updated:', newVal);
      }
    }
  },

  methods: {
    /** 查询项目征集发布列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeApprovalTime && '' != this.daterangeApprovalTime) {
        this.queryParams.params["beginApprovalTime"] = this.daterangeApprovalTime[0];
        this.queryParams.params["endApprovalTime"] = this.daterangeApprovalTime[1];
      }
      listProjectInfo(this.queryParams).then(response => {
        this.projectInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    loadProjectInfoData() {
      this.projectId = this.$route.query.id || this.$route.params.id;
      if (this.projectId) {

        getProjectInfo(this.projectId).then(response => {
          if (response.data && response.data.fileRows) {
            response.data.fileRows = response.data.fileRows.map(fileRow => {
              try {
                fileRow.fileInfo = typeof fileRow.fileInfo === 'string'
                  ? JSON.parse(fileRow.fileInfo)
                  : fileRow.fileInfo;
              } catch (e) {
                console.error('fileInfo解析失败：', e);
                fileRow.fileInfo = [];
              }
              return fileRow;
            });
          }

          this.$nextTick(() => {
            this.formView = {
              ...response.data,
              sciProjectTopicList: response.data.sciProjectTopicList || [],
              sciProjectMemberList: response.data.sciProjectMemberList || []
            };
          });
        }).catch(err => {
          this.$message.error("加载项目信息失败");
        });
      }
    },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        applicationId: null,
        projectName: null,
        researchField: null,
        deptId: null,
        projectLeader: null,
        startDate: null,
        approvalTime: null,
        funding: null,
        progress: null,
        status: null,
        phone: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        fileRows: [  // 保持基础结构
          {
            fileClassName: '',
            uploader: '',
            uploadTime: '',
            fileInfo: []
          }
        ]
      };
      this.sciProjectTopicList = [];
      this.sciProjectMemberList = [];
      this.activeStep = 0;
      this.applicationId = null;
      this.formData = {
        fileRows: []
      }
      this.resetForm("form");
    },

    resetView() {
      this.formView = {
        id: null,
        applicationId: null,
        projectName: null,
        researchField: null,
        deptId: null,
        projectLeader: null,
        startDate: null,
        approvalTime: null,
        funding: null,
        progress: null,
        status: null,
        phone: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        fileRows: [  // 保持基础结构
          {
            fileClassName: '',
            uploader: '',
            uploadTime: '',
            fileInfo: []
          }
        ]
      };
      this.sciProjectTopicList = [];
      this.sciProjectMemberList = [];
      this.resetForm("formView");
    },
    handleDatetimeUpdate(index, datetime) {
      // Update the corresponding uploadTime field
      this.$set(this.form.fileRows[index], 'uploadTime', datetime);
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeApprovalTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.readonlyApplicationId = false;
      this.title = "添加立项管理";
      this.form.fileRows[0].uploader = this.username;
      this.isEditing = false;
      this.getApplicationInfo();
      this.getApplicationList();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getProjectInfo(id).then(response => {
        this.form = response.data;
		    this.sciProjectTopicList = response.data.sciProjectTopicList;
        this.sciProjectMemberList = response.data.sciProjectMemberList;
        this.open = true;
        this.readonlyApplicationId = false;
        this.title = "修改立项管理";
        this.applicationId = this.form.applicationId;
        this.isEditing = true;
        this.readonlyApplicationId = true;
        this.getApplicationInfo();
        this.getApplicationList();
      });
    },

    handleApplicationIdChange(value) {
      if (value !== null && value !== undefined) {
        this.applicationId = value;
        this.getApplicationInfo(); // 示例：加载项目详情
      }
    },

    handleView(row) {
      this.resetView();
      const id = row.id || this.ids
      getProjectInfo(id).then(response => {

        if (response.data && response.data.fileRows) {
          response.data.fileRows = response.data.fileRows.map(fileRow => {
            try {
              // 如果fileInfo是字符串则转换为数组，否则保持原样
              fileRow.fileInfo = typeof fileRow.fileInfo === 'string'
                ? JSON.parse(fileRow.fileInfo)
                : fileRow.fileInfo;
            } catch (e) {
              console.error('fileInfo解析失败：', e);
              fileRow.fileInfo = [];
            }
            return fileRow;
          });
        }
        // 绑定 sciProjectTopicList 和 sciProjectMemberList 到 formView
        this.formView = {
          ...response.data,
          sciProjectTopicList: response.data.sciProjectTopicList || [],
          sciProjectMemberList: response.data.sciProjectMemberList || []
        };
        console.log("member",this.formView.sciProjectMemberList);
        console.log("topic",this.formView.sciProjectTopicList);

        this.drawer = true;
      });
    },
    handleDownload(file) {
      const fileName = file.url; // 替换为实际的文件名
      downloadMinioFile(fileName);
    },

    getApplicationInfo() {
      if(this.applicationId!==null && this.applicationId!==undefined)
      {
        getAppSubmit(this.applicationId).then(response => {
            if (response.data && response.data.fileRows) {
              response.data.fileRows = response.data.fileRows.map(fileRow => {
                try {
                  // 如果fileInfo是字符串则转换为数组，否则保持原样
                  fileRow.fileInfo = typeof fileRow.fileInfo === 'string'
                    ? JSON.parse(fileRow.fileInfo)
                    : fileRow.fileInfo;
                } catch (e) {
                  console.error('fileInfo解析失败：', e);
                  fileRow.fileInfo = [];
                }
                return fileRow;
              });
            }
            this.formData = response.data;
            // 自动设置 form.publishId 的值
            this.form.applicationId = response.data.id;
            this.form.projectName = response.data.projectName;
            this.form.researchField = response.data.researchField;
            this.form.deptId = response.data.deptId;
            this.form.projectLeader = response.data.applicant;
            this.form.funding = response.data.funding;
            this.form.phone = response.data.phone;

          }).catch(err => {
            this.$message.error("加载申报信息失败");
          });
        }
    },


    /** 提交按钮 */
    submitForm() {
       this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.sciProjectTopicList = this.sciProjectTopicList;
          this.form.sciProjectMemberList = this.sciProjectMemberList;
          if (this.form.id != null) {
            updateProjectInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProjectInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
     /** 删除按钮操作 */
     handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除立项管理编号为"' + ids + '"的数据项？').then(function() {
        return delProjectInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

	/** 科研项目课题序号 */
    rowSciProjectTopicIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 科研项目课题添加按钮操作 */
    handleAddSciProjectTopic() {
      let obj = {};
      obj.topicName = "";
      obj.progress = "";
      obj.status = "";
      obj.createdBy = "";
      obj.createdTime = "";
      obj.updatedBy = "";
      obj.updatedTime = "";
      this.sciProjectTopicList.push(obj);
    },
    /** 科研项目课题删除按钮操作 */
    handleDeleteSciProjectTopic() {
      if (this.checkedSciProjectTopic.length == 0) {
        this.$modal.msgError("请先选择要删除的科研项目课题数据");
      } else {
        const sciProjectTopicList = this.sciProjectTopicList;
        const checkedSciProjectTopic = this.checkedSciProjectTopic;
        this.sciProjectTopicList = sciProjectTopicList.filter(function(item) {
          return checkedSciProjectTopic.indexOf(item.index) == -1
        });
      }
    },

      /** 复选框选中数据 */
    handleSciProjectTopicSelectionChange(selection) {
      this.checkedSciProjectTopic = selection.map(item => item.index)
    },

    /** 科研项目课题添加按钮操作 */
    handleAddSciProjectMember() {
      let obj = {};
      obj.userId = "";
      obj.nickName = "";
      obj.role = "";
      obj.topicId = "";
      this.sciProjectMemberList.push(obj);
    },
    /** 科研项目课题删除按钮操作 */
    handleDeleteSciProjectMember() {
      if (this.checkedSciProjectMember.length == 0) {
        this.$modal.msgError("请先选择要删除的成员数据");
      } else {
        const sciProjectMemberList = this.sciProjectMemberList;
        const checkedSciProjectMember = this.checkedSciProjectMember;
        this.sciProjectMemberList = sciProjectMemberList.filter(function(item) {
          return checkedSciProjectMember.indexOf(item.index) == -1
        });
      }
    },




    /** 复选框选中数据 */
    handleSciProjectMemberSelectionChange(selection) {
      this.sciProjectMemberList = selection.map(item => item.index)
    },


    /** 导出按钮操作 */
    handleExport() {
      this.download('system/projectInfo/export', {
        ...this.queryParams
      }, `projectInfo_${new Date().getTime()}.xlsx`)
    },




    addRow() {
      this.form.fileRows.push({
        fileClassName: '',
        uploader: this.username,
        uploadTime: '',
        fileInfo: [],
      });
    },
    removeRow(index) {
      if (this.form.fileRows.length > 1) {
        this.form.fileRows.splice(index, 1);
      } else {
        this.$message.warning('至少需要保留一行');
      }
    },

    formatStatus(status) {
      if (status == null) return '';

      switch (status) {
        case 0:
          return '未通过';
        case 1:
          return '申报中';
        case 2:
          return '已通过';
        default:
          return '';
      }
    },
    getDeptList() {
      listDept().then(response => {
        this.deptList = response.data.filter(dept => dept.deptId !== 100);      });
    },
    getDeptLabel(deptId) {
      const dept = this.deptList.find(d => d.deptId === deptId);
      return dept ? dept.deptName : '';
    },
    getApplicationList() {
      listAppSubmit().then(response => {
        this.applicationList = response.rows;
        if (!this.isEditing) {
          const establishedApplicationIds = this.projectInfoList.map(p => p.applicationId);
          this.selectApplicationList = response.rows.filter(item => item.status === 2 && !establishedApplicationIds.includes(item.id));
        } else {
          // 修改时只过滤 status !== 0
          this.selectApplicationList = response.rows.filter(item => item.status === 2);
        }
      });
    },

    getApplicationLabel(applicationId) {
      const application = this.applicationList.find(p => p.id === applicationId);
      return application ? application.projectName : '';
    },


    addMember() {
      if (!this.form.id) {
        this.$message.error("请先填写并提交项目基本信息");
        return;
      }

      const newMember = {
        projectId: this.form.id,               // 当前项目ID（必填）
        topicId: this.memberForm.topicId || null, // 非必填，空值为 null
        userId: this.memberForm.userId,
        nickName: this.memberForm.nickName,
        role: this.memberForm.role
      };

      this.form.members.push(newMember);

      // 清空临时输入框
      this.memberForm.userId = '';
      this.memberForm.nickName = '';
      this.memberForm.role = '';
      this.memberForm.topicId = null; // 保留原有课题选择状态
    },
    removeMember(index) {
      this.form.members.splice(index, 1);
    },


    nextStep() {
      if (this.activeStep === 3) {
        this.submitForm();
      } else {
        let valid = false;
        switch (this.activeStep) {
          case 0: valid = this.validateStep0(); break;
          case 1: valid = this.validateStep1(); break;
          case 2: valid = this.validateStep2(); break;
          case 3: valid = this.validateStep3(); break;
        }

        if (valid) {
          this.activeStep += 1;
        } else {
          // this.$message.error(`第 ${this.activeStep + 1} 步数据不完整，请补充`);
        }
      }
    },


    prevStep() {
      this.activeStep -= 1;
    },




    validateStep0() {
      const { projectName, researchField, deptId, projectLeader, approvalTime, startDate, endDate, funding, phone } = this.form;
      if(!(projectName && researchField && deptId && projectLeader && approvalTime && startDate && endDate && funding && phone))
      {
        this.$message.error('信息填写不完整，请补充完整');
        return false;
      }
      return true;
    },
    validateStep1() {
      if (this.sciProjectTopicList.length === 0) {
        this.$message.error('请至少添加一个课题');
        return false;
      }

      for (let i = 0; i < this.sciProjectTopicList.length; i++) {
        const row = this.sciProjectTopicList[i];
        if (!row.topicName || !row.leader) {
          this.$message.error(`第 ${i + 1} 行课题信息不完整，请填写课题名称和负责人`);
          return false;
        }
      }

      return true;
    },
    validateStep2() {
      if (this.sciProjectMemberList.length === 0) {
        this.$message.error('请至少添加一名成员');
        return false;
      }

      for (let i = 0; i < this.sciProjectMemberList.length; i++) {
        const member = this.sciProjectMemberList[i];
        if (!member.nickName || !member.role) {
          this.$message.error(`第 ${i + 1} 行成员信息不完整，请填写姓名和角色`);
          return false;
        }
      }

      return true;
    },
    validateStep3() {
      return this.form.fileRows.some(row => row.fileInfo.length > 0);
    },

    getTopicName(topicId) {
      if (!topicId) return '无';
      const topic = this.formView.sciProjectTopicList.find(t => t.id === topicId);
      return topic ? topic.topicName : '未知课题';
    },

    customColorMethod(percentage) {
      const red = '#ff4949';
      const orange = '#e6a23c';
      const green = '#67c23a';

      if (percentage < 50) {
        // 红 → 橙
        const ratio = percentage / 50;
        return this.interpolateColor(red, orange, ratio);
      } else {
        // 橙 → 绿
        const ratio = (percentage - 50) / 50;
        return this.interpolateColor(orange, green, ratio);
      }
    },

    interpolateColor(startColor, endColor, ratio) {
      // 将 hex 颜色转换为 RGB
      function hexToRgb(hex) {
        const bigint = parseInt(hex.slice(1), 16);
        const r = (bigint >> 16) & 255;
        const g = (bigint >> 8) & 255;
        const b = bigint & 255;
        return [r, g, b];
      }

      function rgbToHex(rgb) {
        return "#" + rgb.map(c => Math.round(c).toString(16).padStart(2, '0')).join('');
      }

      const start = hexToRgb(startColor);
      const end = hexToRgb(endColor);

      const r = Math.round(start[0] + (end[0] - start[0]) * ratio);
      const g = Math.round(start[1] + (end[1] - start[1]) * ratio);
      const b = Math.round(start[2] + (end[2] - start[2]) * ratio);

      return rgbToHex([r, g, b]);
    }



  }
};
</script>
<style lang="scss" scoped>
.black-bold-header .el-card__header span {
  font-weight: bold;
  font-family: "SimHei", sans-serif;
}
.loading {
  text-align: center;
  padding: 20px;
  font-size: 16px;
}


::v-deep .el-tabs--card > .el-tabs__header {
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-color: #dcdfe6;
}

::v-deep .el-tabs--card > .el-tabs__content {
  border: 1px solid #dcdfe6;
  border-top: none;
  padding: 20px;
}
</style>
